<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="../model.css"/>
</head>
<body>
      <!-- 导航 -->
  <div class="header">
    <!-- logo -->
    <div class="logo">
     谭艾玲个人网站
    </div>
    <!-- 菜单 -->
    <div class="nav">
       <a href="../tanai.html">WELCOME</a>
    <a href="../首页/Home.html" >个人介绍</a>
    <a href="../照片墙/photos.html" >照片墙</a>
    <a href="blog.html" class="active">设计</a>
    <a href="../联系我/contact.html">联系我</a>
    </div>
  </div>


<!-- 我的设计 -->
  <div class="displayer">
<div class="contact">
  <h3  class="displayer-title">【我的奇形怪状的设计】</h3>
 
  <!-- 多选 -->
<div class="lab-title">
<label for="hobby">1.请选择你的爱好：</label>
</div>
<div class="duo">
<input type="checkbox" name="hobby">深度思考  
<input type="checkbox" name="hobby"> 打球
<input type="checkbox" name="hobby"> 规划人生
<input type="checkbox" name="hobby">提升技能
<input type="checkbox" name="hobby">做vlog等自媒体
<input type="checkbox" name="hobby">记录日志
<input type="checkbox" name="hobby">画画
</div>
<!-- 这里的hobby不可少，必须一样，有趣的是可以是id，也可以是name,但最好全是name -->
<!-- 单选 -->
 <div class="lab-title">
<label >2.请选择你的性别：</label>
</div>
<div class="dan">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</div>
<!-- 弹窗 -->

 <button onclick="tanchuang()">3.弹窗</button>
 <!-- 变化 -->
  <p id="change">4.指定时间后我会变身</p>
  <!-- 搜索框 -->
  <div class="search-container">
  <input type="text" id="searchInput" placeholder="搜索...">
    <div id="results">5.显示搜索内容</div>
</div> 
<!-- 计数器 -->
 <p>6.计数器效果在控制台查看
  显示结果应该为1，2，3
 </p>
 <!-- 防止按键点击多次引起的重复提交 -->
   <button id="throttleBtn">7.点击我（节流）</button>
   <p>一秒内只能执行一次，超过就会弹出提示</p>
<p>点击次数: <span id="count">0</span></p>
<!-- 账号密码设置 -->
 <form >
    <label >8.账号</label>
<input type="text" class="a" placeholder="请输入账号">
<label >密码</label>
<input type="password" id="key" placeholder="密码">
<!-- 上下对比，value显然是将值自动填充，修改需手动删除 -->
<input type="submit">
</form>
<form action="#"></form>
<!-- 页脚 -->
<div class="footer">
    <p>
        设计制作:谭艾玲 Welcome to my website.
    </p>
</div>


<!-- JavaScript代码 -->
  <script>
  // 3.弹窗
  function tanchuang(){

        alert('就是我,弹窗!');
    }
   //4.变化 
  setTimeout(function () {
    document.getElementById("change").innerHTML="4. 3秒已经到了，我变身了";
    },3000);
// 5.防抖的搜索框
 const searchInput = document.getElementById('searchInput');
      const results = document.getElementById('results');
  
  function debounce(func, delay) {
    let timer;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    };
  }
  
  function Search() {
    const query = searchInput.value.trim();
    if (query) {
      // 这里替换为实际的搜索逻辑
      console.log(`搜索: ${query}`);
      // 在模板字符串中 ${} 用于嵌入表达式
      results.textContent = `正在搜索: ${query}`;
      
     
    } else {
      results.textContent = '';
    }
  }
  
  const debouncedSearch = debounce(Search, 500);
  searchInput.addEventListener('input', debouncedSearch);
  // 6.计数器
function createCounter() {
  let count = 0;
  
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); //3
// 7.防止按键点击重复提交
 function throttle(func, delay) {
  let lastCallTime = 0;
  

//   剩余参数(...args)语法  优先于（使用方面）  argument对象
  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime < delay) {
      alert('点击太快了，请稍后再试');
      return;
    }
    
    lastCallTime = now;
    return func.apply(this, args);
  };
}
// 使用封装的节流函数
const button = document.getElementById('throttleBtn');
const countDisplay = document.getElementById('count');
let count = 0;
// count的增加逻辑
button.addEventListener('click', throttle(() => {
  count++;
  countDisplay.textContent = count;
 console.log(`执行第 ${count} 次点击`);
}, 1000)); 

</script>
</body>
</html>